<template>
	<view >
		<!-- 返回顶部 -->
		<view class="fan" @click="hui" v-show="flag">返回顶部</view>
		<!-- 搜索 -->
		<div class="content">
			<input class="weui-input" auto-focus placeholder="搜索"/>
		</div>
		<!-- 轮播图 -->
		<swiper circular=true interval="3000" autoplay=true indicator-dots=true indicator-color="#ffffff" 	indicator-active-color="#ff0000">
			<swiper-item  v-for="(item,key) in title" :key="key">
				<img :src="item.image_src"/>
			</swiper-item>
		</swiper>
		<!-- 导航菜单 -->
		<view class="daohu">
			<view v-for="(item,index) in list" :key="index" @click="dian(index)">
				<img :src="item.image_src">
			</view>
		</view>
		<!-- 楼层图 -->
		<view class="foter" v-for="(item,key) in luo" :key="key">
			<view class="tou">
				<img :src="item.floor_title.image_src">
			</view>
			<view class="erji">
				<view class="right">
					<img :src="item.product_list[0].image_src">
				</view>
				<view class="left">
						<view class="one">
							<view class="tow">
								<img :src="item.product_list[1].image_src">
							</view>
							<view class="tow">
								<img :src="item.product_list[2].image_src">
							</view>
						</view>
						<view class="one1">
							<view class="tow">
								<img :src="item.product_list[3].image_src">
							</view>
							<view class="tow">
								<img :src="item.product_list[4].image_src">
							</view>
						</view>
					
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import http from "../../http/http.js"
	export default {
		data() {
			return {
				title: [],
				list:[],
				luo:[],
				flag:false
			}
		},
		onLoad() {
			this.lunobo()
			this.daoh()
			this.louc()
		},
		// 返回顶部
		onPageScroll(e){
			// console.log(e);
			// console.log(wx.getSystemInfoSync());
			var obj=wx.getSystemInfoSync()
			if(e.scrollTop>obj.windowHeight){
				this.flag=true
			}else{
				this.flag=false
			}
			
		},
		methods: {
			async lunobo(){
				let {data:res} = await http.get('https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata')
				// console.log(res);
				this.title=res.message
			},
			async daoh(){
				let {data:res} = await http.get('https://api-hmugo-web.itheima.net/api/public/v1/home/catitems')
				this.list=res.message
			},
			dian(i){
				// console.log(i);
				if(i==0){
					wx.switchTab({url:"/pages/fl/fl"})
				}
			},
			async louc(){
				let {data:res} = await http.get('https://api-hmugo-web.itheima.net/api/public/v1/home/floordata')
				this.luo=res.message
			},
			// 返回顶部
			hui(){
				wx.pageScrollTo({
				  scrollTop: 0,
				  duration: 3000
				})
			}
		}
	}
</script>

<style lang="scss">
	.fan{
		width: 100%;
		height: 100rpx;
		background: blue;
		text-align: center;
		line-height: 100rpx;
		position: fixed;
	}
.content{
	width: 100%;
	height: 80rpx;
	background-color:#ff0f1b;
	display: flex;
	justify-content: center;
}
.weui-input{
	width: 85%;
	height: 70rpx;
	padding-left: 50rpx;
	border-radius: 20rpx;
	background-color: #ffffff;
}
swiper{
	height: 450rpx;
	img{
		width: 100%;
		height: 450rpx;
	}
}
.daohu{
	width: 100%;
	height: 200rpx;
	// background-color: #ff0f1b;
	display: flex;
	justify-content: center;
	flex-direction: row;
	align-items: center;
	img{
		width: 180rpx;
		height: 160rpx;
	}
}
.foter{
	width: 100%;
	height: 600rpx;
	margin-top: 40rpx;
	// background-color: antiquewhite;
	display: flex;
	flex-direction: column;
	.tou{
		height: 80rpx;
		// background-color: #ff0f1b;
		// line-height: 0rpx;
		img{
			height: 100%;
		}
	}
	.erji{
		flex: 1;
		display: flex;
		.right{
			// width: 100%;
			// height: 100%;
			flex: 1;
			// background-color: #c0c;
			text-align: center;
			img{
				width: 98%;
				height: 98%;
			}
		}
		.left{
			width: 55%;
			height: 100%;
			display: flex;
			.one{
				// width: 100%;
				// height: 100%;
				display: flex;
				flex: 1;
				flex-direction: column;
				.tow{
					flex: 1;
					text-align: center;
					img{
						width: 95%;
						height: 95%;
					}
				}
			}
			.one1{
				// width: 100%;
				// height: 100%;
				flex: 1;
				display: flex;
				flex-direction: column;
				.tow{
					text-align: center;
					flex: 1;
					img{
						width: 95%;
						height: 95%;
					}
				}
			}
		}
	}
}
</style>
